<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>鼠标拖尾效果</title>
    <style>
        .trail {
            position: absolute;
            background-color: #19bc9c;
            width: 20px;
            height: 20px;
            opacity: 0.7;
            z-index: -1;
            /* 确保拖尾在鼠标下面 */
            pointer-events: none;
            /* 禁止拖尾元素响应鼠标事件 */
            -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }
    </style>
</head>

<body>
    <script>
        // 创建拖尾的 DOM 元素
        let trail = document.createElement('div');
        trail.classList.add('trail');
        document.body.appendChild(trail);

        // 监听鼠标移动事件
        document.addEventListener('mousemove', (event) => {
            // 获取鼠标当前位置信息
            let x = event.pageX;
            let y = event.pageY;

            // 计算拖尾元素的位置
            let trailX = x - 10; // left = x - width/2
            let trailY = y - 10; // top = y - height/2

            // 计算拖尾元素的不透明度
            let opacity = 0.5 + Math.random() * 0.5;

            // 修改拖尾元素的位置和样式
            trail.style.left = trailX + 'px';
            trail.style.top = trailY + 'px';
            trail.style.backgroundColor = `rgba(25, 188, 156, ${opacity})`;
            trail.style.width = 30 + Math.random() * 20 + 'px';
            trail.style.height = 30 + Math.random() * 20 + 'px';

            // 设置定时器，定时清除过期的拖尾元素
            // setTimeout(() => {
            //     trail.parentNode.removeChild(trail); // 从 DOM 树中移除拖尾元素
            // }, 1000); // 过期时间为 1s
        });
    </script>
</body>

</html>